<div class="container">
  <h4>
    <b>SplitComponent</b>&nbsp;<span class="sel"
      >(selector: '<span class="selContent">as-split</span>' / exportAs: '<span class="selContent">asSplit</span
      >')</span
    >
  </h4>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Inputs</th>
        <th>Type</th>
        <th>Default</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (prop of splitDoc.inputs; track prop) {
        <tr>
          <td>{{ prop.name }}</td>
          <td>{{ prop.type }}</td>
          <td>
            <code>{{ prop.default }}</code>
          </td>
          <td [innerHTML]="prop.details"></td>
        </tr>
      }
    </tbody>
  </table>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Outputs</th>
        <th>Value</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (event of splitDoc.outputs; track event) {
        <tr>
          <td>{{ event.name }}</td>
          <td>
            <code>{{ event.value }}</code>
          </td>
          <td [innerHTML]="event.details"></td>
        </tr>
      }
    </tbody>
  </table>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Access from TS class</th>
        <th>Type</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (item of splitDoc.class; track item) {
        <tr>
          <td>{{ item.name }}</td>
          <td>
            <code>{{ item.type }}</code>
          </td>
          <td [innerHTML]="item.details"></td>
        </tr>
      }
    </tbody>
  </table>
  <br /><br />

  <h4>
    <b>SplitAreaComponent</b>&nbsp;<span class="sel"
      >(selector: '<span class="selContent">as-split-area</span>' / exportAs: '<span class="selContent"
        >asSplitArea</span
      >')</span
    >
  </h4>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>&#64;Input()</th>
        <th>Type</th>
        <th>Default</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (prop of splitAreaDoc.inputs; track prop) {
        <tr>
          <td>{{ prop.name }}</td>
          <td>{{ prop.type }}</td>
          <td>
            <code>{{ prop.default }}</code>
          </td>
          <td [innerHTML]="prop.details"></td>
        </tr>
      }
    </tbody>
  </table>
  <br /><br />

  <h4>
    <b>SplitGutterDirective</b>&nbsp;<span class="sel"
      >(selector: '<span class="selContent">[asSplitGutter]</span> ')</span
    >
  </h4>
  <p>Used as structural directive (<code>*asSplitGutter</code>) to customize the gutter.</p>
  <p>Mostly requires <code>width: 100%</code> and <code>height: 100%</code> in order to fill the whole gutter.</p>
  <p>
    If the custom gutter is wider than the declared gutter size (using <code>gutterSize</code> input) the areas will
    overflow too. So attention is required to match the size of the gutter.
  </p>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Template context property</th>
        <th>Type</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (prop of splitGutterDoc.templateContext; track prop) {
        <tr>
          <td>{{ prop.name }}</td>
          <td>{{ prop.type }}</td>
          <td [innerHTML]="prop.details"></td>
        </tr>
      }
    </tbody>
  </table>
  <br /><br />

  <h4>
    <b>SplitGutterDragHandleDirective</b>&nbsp;<span class="sel"
      >(selector: '<span class="selContent">[asSplitGutterDragHandle]</span> ')</span
    >
  </h4>
  <p>Used to declare an area inside <code>asSplitGutter</code> to be a drag handle</p>
  <p>Can be declared on multiple elements which means all of them are drag handles.</p>
  <br /><br />

  <h4>
    <b>SplitGutterExcludeFromDragDirective</b>&nbsp;<span class="sel"
      >(selector: '<span class="selContent">[asSplitGutterExcludeFromDrag]</span> ')</span
    >
  </h4>
  <p>Used to declare an area inside <code>asSplitGutter</code> to be excluded from drag</p>
  <p>Can be declared on multiple elements which means all of them are excluded from drag.</p>
  <p>
    <code>asSplitGutterExcludeFromDrag</code> inside <code>asSplitGutterDragHandle</code> works as expected (all of the
    element is a handle except the excluded area)
  </p>
  <p>
    <code>asSplitGutterDragHandle</code> inside <code>asSplitGutterExcludeFromDrag</code> is ignored and the whole
    element marked with exclude is excluded.
  </p>
  <br /><br />

  <h4><b>Theme</b></h4>
  <table class="table table-striped">
    <thead>
      <tr>
        <th style="width: 40%">CSS variable</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (x of themeInfo; track x) {
        <tr>
          <td>
            <code>--as-{{ x.name }}</code>
          </td>
          <td [innerHTML]="x.details"></td>
        </tr>
      }
    </tbody>
  </table>

  <h4><b>CSS classes</b></h4>
  <table class="table table-striped">
    <thead>
      <tr>
        <th style="width: 40%">Split element classes</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (x of cssClasses.split; track x) {
        <tr>
          <td>
            <code>{{ x.name }}</code>
          </td>
          <td [innerHTML]="x.details"></td>
        </tr>
      }
    </tbody>
  </table>
  <table class="table table-striped">
    <thead>
      <tr>
        <th style="width: 40%">Area element classes</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (x of cssClasses.area; track x) {
        <tr>
          <td>
            <code>{{ x.name }}</code>
          </td>
          <td [innerHTML]="x.details"></td>
        </tr>
      }
    </tbody>
  </table>
  <table class="table table-striped">
    <thead>
      <tr>
        <th style="width: 40%">Gutter element classes</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      @for (x of cssClasses.gutter; track x) {
        <tr>
          <td>
            <code>{{ x.name }}</code>
          </td>
          <td [innerHTML]="x.details"></td>
        </tr>
      }
    </tbody>
  </table>
</div>
